<template>
  <div class="main" id="app">
    <div class="disFlex">
      <img src="https://file.open.banchengyun.com/2019/05/06/155713234216622.png" class="logo">
      <div class="nav-op disFlex">
        <div class="item click">
          <a href="https://www.banchengyun.com/index.html">首页</a>
        </div>
        <div>
          <a href="https://www.banchengyun.com/index.html#ability">产品介绍</a>
        </div>
        <div>
          <a href="https://www.banchengyun.com/index.html#users">客户案例</a>
        </div>
        <div>
          <a href="https://www.banchengyun.com/index.html#joinus">入驻合作</a>
        </div>
      </div>
    </div>
    <div class="login disFlex Flex-right waLogin">
      <div class="login-area disFlex vertical Flex-middle">
        <div class="title">登录招聘云端</div>
        <Form>
          <div class="input _first displayBox">
            <div class="inp boxFlex">
              <input type="hidden" name="loginType" value="banchengyun">
              <!-- <input type="text" class="account" name="userRealname" id="userRealname" placeholder="账户名" /> -->
              <input
                type="text"
                class="account"
                name="username"
                id="userRealname"
                placeholder="用户名"
                v-model="user.username"
              >
            </div>
          </div>
          <div class="input _last displayBox">
            <div class="inp boxFlex">
              <!-- <input class="password" type="password" name="userPassword" id="userPassword" placeholder="密码" @keyup.enter="loginFn" /> -->
              <input
                class="password"
                type="password"
                name="password"
                id="userPassword"
                placeholder="密码"
                @keyup.enter="loginFn"
                v-model="user.password"
              >
            </div>
          </div>
          <input type="hidden" name="form" value="1">
        </Form>
        <div class="button" id="submit" @click="login">
          <input class="btnSubmit" type="submit" value="立即登录 →">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Login, test } from "api/recuit/login";
import { ERR_OK } from "api/config";
export default {
  data() {
    return {
      user: {
        username: "",
        password: ""
      },
      buttonSize: "large"
    };
  },
  created() {
    var width = window.screen.width;
    var height = window.screen.height;
    var html = document.documentElement;
    var hWidth = html.getBoundingClientRect().width;
    html.style.fontSize = width / 60 + "px";
    if (parseFloat(html.style.fontSize) < 20) {
      html.style.fontSize = "20px";
    }
  },
  methods: {
    login() {
      if (!this.user.username) {
        this.$Message.error("请输入账号");
        return;
      }
      if (!this.user.password) {
        this.$Message.error("请输入密码");
        return;
      }
      this.loginAjax();
    },
    loginAjax() {
      this.$Loading.start();
      console.log(this.user);
      Login(this.user)
        .then(_res => {
          localStorage.setItem('user_id', _res.user_id )
          localStorage.setItem('is_super_user', _res.is_super_user)
          localStorage.setItem('username', this.user.username )
          this.$Message.success("登陆成功");
          setTimeout(() => {
            if (this.user.username == "china") {
              this.$router.replace("/consumerYhList");
            } else {
              this.$router.replace("/");
            }
          }, 1500);
        })
        .catch(err => {
          this.$Message.error(err);
        });
    }
  },
  mounted() {
    this.$Loading.finish();
  }
};
</script>

<style scoped lang="less">
// @import "./../../public/global.min.less";
// .login {
//   width: 100%;
//   height: 100%;
// }
* {
  margin: 0;
  padding: 0;
}

// body {
//   background: url(https://file.open.banchengyun.com/2019/05/06/155713215442061.jpg)
//     no-repeat;
//   background-size: cover;
// }
.waLogin {
  width: 70%;
  margin: 0 auto;
  margin-top: 250px;
}

.main {
  width: 100%;
  height: 100vh;
  background: url(https://file.open.banchengyun.com/2019/05/06/155713215442061.jpg)
    no-repeat;
  background-size: 100%;
}

.logo {
  width: 157.5px;
  height: 45.9px;
  margin-top: 35px;
  margin-left: 110px;
  margin-right: 39px;
}

.nav-op {
  margin-top: 49px;
}

.nav-op div {
  margin-left: 50px;
}

.nav-op div a {
  font-size: 18px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
}

// .nav-op div a:hover {
//   color: #53bac6;
//   border-bottom: 3px solid rgba(83, 186, 198, 1);
//   padding-bottom: 5px;
// }

// .login {
//   width: 70%;
//   margin: 0 auto;
//   margin-top: 250px;
// }

.login-area .title {
  font-weight: bold;
  font-size: 18px;
  font-family: PingFangSC-Semibold;
  font-weight: 500;
  color: rgba(30, 73, 156, 1);
  margin-bottom: 30px;
}

.login-area .account,
.login-area .password {
  border: none;
  border-bottom: 1px solid rgba(153, 153, 153, 1);
  width: 250px;
  line-height: 40px;
  font-size: 16px;
}
.password,
.account {
  box-shadow: 0 0 0 1000px white inset;
  padding: 2px 10px;
}

input::placeholder {
  font-size: 16px;
  font-family: PingFangSC-Light;
  font-weight: 300;
  color: rgba(153, 153, 153, 1);
  line-height: 40px;
}

.btnSubmit {
  width: 250px;
  height: 36px;
  background: rgba(30, 73, 156, 1);
  border-radius: 28px;
  margin-top: 30px;
  font-size: 14px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(254, 254, 254, 1);
  line-height: 30px;
  cursor: pointer;
  border: none;
}
</style>
